<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员购后台管理系统</title>
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="../css/lndex.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3418409_b08iye0h79l.css">
    <style>
        #update {
            display: none;
        }
    </style>
</head>

<body>
    <h1>会员购管理系统</h1>
    <div id="send">
        商品名称<input type="text" />
        商品价格<input type="text" />
        地址<input type="text" />
        商品图片地址<input type="text" />
        <input type="button" value="发布" />

    </div>
    <div id="update">
        商品名称<input id="up1" type="text" />
        商品价格<input id="up2" type="text" />
        地址<input id="up3" type="text" />
        商品图片地址<input id="up4" type="text" />
        <input type="button" id="up5" value="保存" />

    </div>
    <div id="pdiv">

    </div>
    <script>
        var productArr;
        let id = localStorage.getItem("id");
        var ipts = document.querySelectorAll("#send input");
        ipts[4].onclick = function () {
            var pname = ipts[0].value;
            var pprice = ipts[1].value;
            var pdesc = ipts[2].value;
            var pimg = ipts[3].value;
            let url = "http://jx.xuzhixiang.top/ap/api/goods/goods-add.php";
            let promise = axios.get(url, {
                params: {
                    pname,
                    pprice,
                    pdesc,
                    pimg,
                    uid: id,
                },
            });
            console.log("axios get请求成功以后执行 then");
            promise.then(function (res) {
                console.log(res);
                console.log(res.data);
                loadProductList();
            });
        };

        loadProductList();
        function loadProductList() {
            var uid = id;
            var pagenum = 0;
            var pagesize = 20;
            var url = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
            let p = axios.get(url, { params: { uid, pagenum, pagesize } });
            p.then((r) => {
                console.log(r.data);
                productArr = r.data.data;
                console.log(productArr);
                var str = "";
                productArr.forEach((pObj) => {
                    str += ` 
                    <div class="project-list-item" id="product${pObj.pid}">
                        <div class="item-img" style="background-image:url(${pObj.pimg});"></div>
                            <div class="item-text">
                            <div class="text-title">${pObj.pname}</div>
                            <div class="text-time">
                                <span class="iconfont icon-shijianweidu" id="shijian"></span>
                                2022.07.15 - 07.17
                            </div>
                        <div class="text-place">
                            <span id="didian" class="iconfont icon-didian"></span>
                            <span>${pObj.pdesc}</span>
                        </div>
                        <div class="text-price">
                            <div class="text-number">
                                <span class="price-symbol">¥</span>
                                <span class="price">${pObj.pprice}</span>
                                <span class="star">起</span>
                                <span class="introduce">独家</span>
                            </div>
                        </div>
                    </div>
                <button style="height: 50px;margin-top:80px;" onclick="delBtnClick(${pObj.pid},this)">删除</button>
                <button style="height: 50px;margin-top:80px;" onclick="update(${pObj.pid},this)">修改</button>
                </div>
                `;
                });
                document.querySelector("#pdiv").innerHTML = str;
            });
        }
        function delBtnClick(pid, btn) {
            console.log("删除");
            console.log(pid);
            var uid = id;
            var token = localStorage.getItem("token");
            let url = "http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php";
            axios
                .get(url, {
                    params: {
                        uid,
                        pid,
                        token,
                    },
                })
                .then((r) => {
                    console.log(r.data);
                    alert(r.data.msg);
                    console.log(this);
                    btn.parentNode.remove();
                });
        }

        function update(pid, btn) {
            var pObj = productArr.find(function (item) {
                return pid == item.pid;
            });
            up1.value = pObj.pname;
            up2.value = pObj.pprice;
            up3.value = pObj.pdesc;
            up4.value = pObj.pimg;
            document.querySelector("#update").style.display = "block";
            up5.onclick = function (){
                pname= up1.value;
                pprice=up2.value;
                pdesc=up3.value;
                pimg=up4.value;
                let url = "http://jx.xuzhixiang.top/ap/api/goods/goods-update.php";
                axios
                    .get(url, {
                        params: {
                            pid,
                            pname,
                            pprice,
                            pdesc,
                            pimg,
                        },
                    })
                    .then((r) => {
                        console.log(r.data);
                        console.log(this);
                        loadProductList();
                    })
            }
        };

    </script>
</body>

</html>